<!DOCTYPE html>
<html lang="en" xmlns:th=http://www.thymeleaf.org xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="/static/bootstrap/main/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="/static/bootstrap/table/css/bootstrap-table.min.css" rel="stylesheet"/>
    <link href="/static/bootstrap/fileinput/css/fileinput.min.css" rel="stylesheet"/>
    <link rel="stylesheet"  href="/static/layui/css/layui.css"  media="all">
    <script type="text/javascript">

    </script>
</head>
<body>
<div id="app">
    <h2>部署流程版本列表</h2>
    <table id="mytable"></table>
</div>
<script type="text/html" id="tool">
    <button id='dc' type="button" class="btn btn-info" shiro:hasPermission="activiti:activitiManager:deploymentIndex:export">导出</button>&nbsp;&nbsp;
    <button id='sc' type="button" class="btn btn-danger" shiro:hasPermission="activiti:activitiManager:deploymentIndex:delete">删除</button>
</script>
</body>
<script src="/static/bootstrap/jquery/jquery-3.3.1.min.js"></script>
<script src="/static/bootstrap/main/js/bootstrap.min.js"></script>
<script src="/static/bootstrap/table/js/bootstrap-table.min.js"></script>
<script src="/static/bootstrap/table/js/bootstrap-table-zh-CN.min.js"></script>
<script src="/static/bootstrap/fileinput/js/fileinput.js"></script>
<script src="/static/bootstrap/fileinput/locales/zh.js"></script>
<!--<script th:src="@{/elementui/js/vue.js}"></script>-->
<script src="/static/layui/layui.js"></script>
<script src="/static/js/activiti.manager.core.util.js"></script>
<script th:inline="javascript">
    var layer;
    //获取token
    var token = CoreUtil.getData("access_token");
    //地址栏转义token中的#号
    var tokenQuery = token.replace("#", "%23");
    layui.use('layer', function() { //独立版的layer无需执行这一句
        layer = layui.layer; //独立版的layer无需执行这一句
    });

    function openHtml(deploymentId){
        console.log(deploymentId);
    }
    window.operateEvents = {
        "click #dc" : function (e,value,row,index) {
                var url = CoreUtil.getRouter() + "/models/exportActivitiZip";
                var fileName = "testAjaxDownload.txt";
                var form = $("<form></form>").attr("action", url).attr("method", "post");
                form.append($("<input></input>").attr("type", "hidden").attr("name", "resourceName").attr("value", row.resourceName));
                form.append($("<input></input>").attr("type", "hidden").attr("name", "authorization").attr("value", token));
                form.appendTo('body').submit().remove();
        },"click #openPng" : function (e,value,row,index) {
            var id=row.deploymentId;
            var name = row.diagramResourceName;
            layer.open({
                type: 1
                ,offset: 'auto' //具体配置参考
                ,id: 'layerDemo' //防止重复弹出
                ,area: ['80%', '80%']
                ,content: "<img src=\"" + CoreUtil.getRouter() + "/models/getDeploymentIdBpmnImgs/" +id + "?resourceName=" +  name + "&authorization=" + tokenQuery + "\">"
                ,btn: '关闭'
                ,btnAlign: 'c' //按钮居中
                ,shade: 0 //不显示遮罩
                ,yes: function(){
                    layer.closeAll();
                }
            });
        },
        "click #openXml" : function (e,value,row,index) {
            var id=row.deploymentId;
            var name = row.resourceName;
            layer.open({
                type: 2
                ,offset: 'auto' //具体配置参考
                ,id: 'layerDemo' //防止重复弹出
                ,area: ['80%', '80%']
                ,content: "/activitiManager/getDeploymentIdBpmnXml/" +id + "?resourceName=" +  name + "&authorization=" + tokenQuery
                ,btn: '关闭'
                ,btnAlign: 'c' //按钮居中
                ,shade: 0 //不显示遮罩
                ,yes: function(){
                    layer.closeAll();
                }
            });
        },
        "click #sc" : function (e,value,row,index) {
            var id=row.deploymentId;
            $.ajax({
                url:"/models/delete/rmDeployment/"+id,
                type:"POST",
                success:function(res){
                    alert(res);
                    location.reload();
                }

            });
        }
    }

    $("#mytable").bootstrapTable({
        url:CoreUtil.getRouter() + "/models/deploymentAllListVersion/" + [[${key}]],   //请求地址
        method:"get",
        ajaxOptions:{
            headers: {"authorization": token}
        },
        striped : true, //是否显示行间隔色
        pageNumber : 1, //初始化加载第一页
        pagination : true,//是否分页
        sidePagination : 'server',//server:服务器端分页|client：前端分页
        pageSize : 5,//单页记录数
        pageList : [ 5, 10, 20],//可选择单页记录数
        showRefresh : true,//刷新按钮
        toolbar: "#toolbar",
        queryParams : function(params) {//上传服务器的参数
            var temp = {
                page :params.offset + 0,// SQL语句起始索引
                limit : params.limit,  // 每页显示数量
            };
            return temp;
        },
        responseHandler: function(res){
            return {
                "total":res.limit,
                "rows" : res.data.records
            };
        },columns : [ {
            title : 'id',
            field : 'deploymentId'
        },{
            title : '流程名称',
            field : 'dName',
        }, {
            title : '流程key',
            field : 'dKey',
        },{
            title : '流程实例名称',
            field : 'pName',
        }, {
            title : '流程实例key',
            field : 'pKey',
        }, {
            title : '版本',
            field : 'version',
            sortable : true
        },{
            title : '流程模型文件',
            field : 'resourceName',
            events: operateEvents,
            formatter: resourceNameHref
        },{
            title : '流程模型图片',
            field : 'diagramResourceName',
            events: operateEvents,
            formatter: diagramResourceNameHref
        },{
            title : '部署时间',
            field : 'deploymentTime',
            sortable : true,
            formatter: function (value, row, index) {
                return changeDateFormat(value);
            },
        }, {
            field:'controller',
            title: '操作',
            width: 300,
            align: 'center',
            valign: 'middle',
            events: operateEvents,
            formatter: actionFormatter
        }],
        onLoadSuccess: function () {
        },
        onLoadError: function () {
        },
        onDblClickRow: function (row, $element) {
        },
    });

    /**
     * 按钮设置
     */
    function actionFormatter(value,row,index) {
        var button =  $("#tool").html();
        return  button;
    }

    /**
     *查看流程文件
     */
    function resourceNameHref(value,row,index){
        return "<a href='javascript:void(0);' id='openXml' class=\"font-blue\">" + value + "</a>"
    }

    /**
     *查看流程图片
     */
    function diagramResourceNameHref(value,row,index){
        return "<a href='javascript:void(0);' id='openPng' class=\"font-blue\">" + value + "</a>"
    }


    /**
     * 时间格式日期转换
     */
    function changeDateFormat(cellval) {
        if (cellval != null) {
            var date = new Date(cellval);
            var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
            var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();

            var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
            var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
            var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();

            return date.getFullYear() + "-" + month + "-" + currentDate + " " + hours + ":" + minutes + ":" + seconds;
        }
    }
</script>
<style type="text/css">
    a {
        color: #337ab7;
    }
</style>
</html>